<template>
  <div class="home-wrapper">
    <common-header :content="headerTitle"
                   class="header" />
    <common-notice class="notice"></common-notice>
    <common-loading v-show="showLoading"></common-loading>
    <home-list :list="list"
               v-if="list.length"
               @refresh="handleRefresh"></home-list>
    <div class="record"
         v-show="!showLoading"
         @click="handleRecord">
      <div class="record-title">
        <i class="iconfont icon-jiekuanjilu"></i>
        <div class="desc">我的借贷记录</div>
      </div>
      <i class="iconfont icon-xiangyou"></i>
    </div>
    <common-button @submit="handleSubmit"
                   :content="buttonTitle"
                   v-show="!showLoading"></common-button>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import CommonHeader from 'common/header/header'
import CommonNotice from 'common/noticeBar/noticeBar'
import CommonButton from 'common/button/button'
import CommonLoading from 'common/loading/loading'
import HomeList from './components/list'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    tabBar,
    CommonHeader,
    CommonNotice,
    HomeList,
    CommonButton,
    CommonLoading
  },
  created () {
    this.getState()
  },
  data () {
    return {
      headerTitle: '易惠易贷',
      buttonTitle: '一键借贷',
      showLoading: true,
      list: [],
      page: 1
    }
  },
  methods: {
    handleSubmit () {
      this.$router.push({ path: '/borrow' })
    },
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getLender()
      } else {
        console.log('borrow')
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getLender () {
      const page = this.page
      this.$api.person.lender({
        page
      })
        .then(this.getLenderSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getLenderSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.list = data.lender
        console.log(data.lender)
      }
    },
    handleRefresh (page) {
      this.page = page
      this.getLender()
    },
    handleRecord () {
      this.$router.push({
        path: '/me/record'
      })
    }
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.home-wrapper .notice >>> .icon-wrap i
  color #747D8C
  font-weight 500

.notice >>> .swiper-content
  color #747D8C
  font-weight 500

.notice
  background-color $common_bgc
  margin-bottom 20px

.home-wrapper
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 10
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 134px

  .header
    z-index 20

.record
  background-color $common_bgc
  height 111px
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
  border-radius 24px
  display flex
  align-items center
  align-items center
  padding-left 32px
  padding-right 32px
  box-sizing border-box
  margin-bottom 20px
  justify-content space-between

  .record-title
    display flex
    height 100%
    font-size $shop_name
    align-items center
    font-weight 400
    color $id_input

    i
      font-size $shop_name
      align-items center
      font-weight 400
      color $id_input
      margin-right 40px

  i
    font-size $shop_name
    align-items center
    font-weight 400
    color $id_input
</style>
